<template>

    <!--筛选条件-->
    <div class="shaixuan2">
        <div class="first_table">
            <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all v-loading="loading">
                <el-table-column align="center" fixed  width="55" label="序号"  prop="id"></el-table-column>
                <el-table-column header-align="center" align="center" prop="enter_time" label="进入直播间时间"></el-table-column>
                <el-table-column header-align="center" align="center" prop="exit_time" label="离开直播间时间"></el-table-column>
                <el-table-column header-align="center" align="center" prop="online_time" label="本次所处时长(s)"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>


<script>


    import {getjilu} from '@/api/live/action';

    export default {
     
        data(){
            return {
                pageSize: 10, //一页显示多少条
                pageNumber: 1,
                total: 0, //总页数
                tableData:[],
                loading: false,
            }
        },
        created(){

            this.init();
        },
        props: {
            liveId: {
                type: String,
                default: ''
            },
            live_user_id: {
                type: String,
                default: ''
            }
        },
        methods: {
            init(){
            let _param = {
                liveId:this.$props.liveId,
                user_id:this.$props.live_user_id,
                pageSize:this.pageSize,
                pageNumber:this.pageNumber
            };

            getjilu(_param).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                } else {
                    this.msgError(res.msg);
                }
            })


        },
            handleSizeChange: function (e) {
                console.log(e);
                this.pageSize = e;
                this.init();
            },
            handleCurrentChange: function (e) {
                console.log(e);
                this.pageNumber = e;
                this.init();
            },
            
        }
        
    }

</script>


<style>
.yixuan {
    margin: 20px;
    color: #787878;
}
</style>